<template>
  <div class="reportfreehead" style="">
    <div class="head-row">
      <span class="choice-title">所属企业：</span>
      <el-cascader
        v-model="company_id_arr"
        :placeholder="'选择所属企业'"
        collapse-tags
        :options="companyOptions"
        ref="cascaderRef"
        :props="{
          value:'id',
          label:'company_name',
          children:'children',
          expandTrigger: 'hover',
          multiple: 'true',
         }"
        clearable size="small"
        @visible-change="companyVisibleChange"
        @remove-tag="companyRemoveTag"
        style="width:20%;margin-right: 20px">
      </el-cascader>
      <span class="choice-title">标签选择：</span>
      <div v-if="tagsList.length" style="display:inline-block">
        <el-radio-group v-model="tag" size="mini" @change="tagChange">
          <el-radio-button v-for="item in tagsList"  :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
        </el-radio-group>
      </div>
      <div v-else style="display: inline-block;margin-left: 20px;color: #ccc; font-size: 18px">无标签</div>
    </div>

    <div class="head-row">
      <span class="choice-title">所属案场：</span>
      <el-select v-model="submitCase"
                 @change="CaseChange"
                 @visible-change="CaseVisibleChange"
                 @remove-tag="CaseClick"
                 filterable :multiple="true" size="small" collapse-tags
                 placeholder="请选择案场" style="width:20%;margin-right: 20px">
        <el-option
          v-for="item in caseOptions"
          :key="item.id"
          :label="item.case_name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="head-row">
      <span class="choice-title">所属区域：</span>
      <el-select v-model="submitArea" filterable class="area-select" @change='areaChange'
                 ref="areaRef" size="small" placeholder="请选择区域" style="width:20%;margin-right: 20px">
        <el-option
          v-for="item in areaOptions"
          :key="item.area_id"
          :label="item.area_name"
          :value="item.area_id">
        </el-option>
      </el-select>
      <span class="choice-title">对比区域：</span>
      <el-select v-model="submitAreaContrast" filterable class="area-contrast-select" @change='pkareaChange'
                 ref="areaRef" size="small" placeholder="请选择区域" style="width:20%">
        <el-option
          v-for="item in areaOptions"
          :key="item.area_id"
          :label="item.area_name"
          :value="item.area_id">
        </el-option>
      </el-select>
    </div>
    <div class="head-row">
      <div class="datecheck">
        <span class="choice-title">日期选择：</span>
        <el-date-picker
          v-model="datetimeval.day"
          type="daterange"
          align="right"
          unlink-panels
          popper-class="report-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          size="small"
          @change="dayChange"
          style="width:20%;margin-right: 20px">
        </el-date-picker>
        <span class="choice-title">时段选择：</span>
        <template>
          <el-time-picker
            is-range
            v-model="datetimeval.hm"
            value-format="HH:mm"
            format="HH:mm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            @change="timeChange"
            size="small">
          </el-time-picker>
        </template>
        <el-select v-model="TimeFast" placeholder="快速选择" @change="TimaFastChange" class="timefast">
          <el-option
            v-for="item in TimeFastList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="head-row" style="height: auto; min-height: 36px;">
      <span class="choice-title">时间间隔：</span>
      <el-radio-group v-model="timeSizeCkeck" size="mini" @change="timeGapChange">
        <el-radio-button  v-for="item in timeSizeList" :key="item.tag" :label="item.tag">{{item.name}}</el-radio-button>
      </el-radio-group>
    </div>
    <div class="head-row-kpi">
      <span class="choice-title">指标选择：</span>
      <div class="checkKPI" v-if="KPIList.length">
        <el-radio-group v-model="KPI" size="small" @change="kpiChange">
          <template v-for="item in KPIList" >
            <el-radio  v-if="item.type == 1"
                          :key="item.key" :label="item.key" border>{{item.name}}</el-radio>
          </template>
        </el-radio-group>
      </div>
      <div v-else style="display: inline-block;margin-left: 20px;color: #ccc; font-size: 18px">无指标权限</div>
    </div>
    <div class="head-row-sub">
      <el-button @click="queryData"
                 style="margin-right:45px;"
                 :type="dataIsChange ? 'primary':'success'" size="small">
        <span v-if="dataIsChange"><i class="el-icon-search"></i> 查询报表</span>
        <span v-else><i class="el-icon-refresh-left"></i> 刷新报表</span>
      </el-button>
    </div>
  </div>
</template>
<style lang="scss">
  .reportfreehead {
    width: 100%;
    background: #fff;
    padding: 27px 0 10px 30px;
    .head-row {
      line-height: 36px;
      height: 36px;
      margin-bottom: 15px;
      .choice-title{
        display: inline-block;
        width: 85px;
        margin-right: 5px;
        text-align: left;
      }
      .block{
        color: #777;
        span{
          margin-right: 2px;
        }
      }
      span {
        font-size: 14px;
      }
      .datecheck {
        width: 100%;
        height: 36px;
        display: inline-block;
        .el-input__inner {
          line-height: 36px;
          height: 32px;
          font-size: 14px;
          border-radius: 0;
          width: 250px;
          border-color: #e3eaf4;
          .el-input__icon {
            height: 36px;
            line-height: 36px;
            &.el-range__close-icon {
              display: none;
            }
          }
          .el-range-separator {
            height: 36px;
            line-height: 36px;
            padding: 0;
            width:6%;
          }
        }
        .el-date-editor--date {
          .el-input__inner {
            border-radius: 0;
            border-color: #e3eaf4;
            height: 36px;
            line-height: 36px;
          }
          span,
          i {
            line-height: 36px;
          }
        }
        .timefast{
          width: 120px;
          .el-input__inner {
            padding: 0 20px;
            font-size: 14px;
            margin-left: -6px;
          }
        }
        .el-input--suffix {
          width: 120px;
          .el-input__inner {
            padding-right: 0;
            width: 120px;
            color:#545deb;
            background: #f2f5ff;
            border-color: #cad7ff
          }
          .el-input__inner::-webkit-input-placeholder{
            color: #545deb;
          }
          .el-input__prefix {
            .el-input__icon {
              line-height: 36px;
              height: 36px;
            }
          }
          .el-input__suffix {
            line-height: 45px;
            vertical-align: middle;
            .el-input__suffix-inner{
              .el-icon-arrow-up.is-reverse{
                margin-top: -2px;
                display: block;
              }
            }
          }
        }
      }
      &.site-row {
        margin-bottom: 3px;
        position: relative;
        height: auto;
        > span {
          vertical-align: top;
        }
        .xiala {
          position: absolute;
          right: 20px;
          width: 80px;
          height: 36px;
          .iconfont {
            position: absolute;
            height: 36px;
            line-height: 38px;
            right: 10px;
          }
          .el-checkbox {
            width: 80px;
            height: 36px;
            line-height: 36px;
            padding: 0 10px 0 0;
            color: #000;
            .el-checkbox__input {
              display: none;
            }
            .el-checkbox__label {
              line-height: 36px;
              color: #000;
              padding: 0;
            }
          }

          border-radius: 2px;

          top: 0;
          text-align: center;
        }
        .site,
        .reheadselect {
          display: inline-block;
          width: 60%;
          transition: all 0.5s;
          overflow: hidden;
          &.siteopen{
            overflow-y:auto;
            &::-webkit-scrollbar {/*滚动条整体样式*/
              width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
              height: 5px;
              border-radius: 5px;
              scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
              border-radius: 5px;
              box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
              background: rgba(0,0,0,0.2);
              scrollbar-arrow-color:red;
            }
            &::-webkit-scrollbar-track {/*滚动条里面轨道*/
              box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
              background: rgba(0,0,0,0.1);
              border-radius: 5px;
            }
          }
        }
      }
      &.show {
        > span {
          vertical-align: bottom;
        }
        height: 24px;
        line-height: 24px;
        .el-radio-group {
          height: 24px;
          line-height: 24px;
          .el-radio-button__inner {
            height: 24px;
            line-height: 22px;
            padding: 0;
            width: 50px;
            font-size: 12px;
          }
        }
      }
    }
    .head-row-kpi{
      width: 100%;
      margin-bottom: 15px;
      .choice-title{
        display: inline-block;
        width: 85px;
        margin-right: 5px;
        text-align: left;
        vertical-align: top;
      }
      .checkKPI{
        width: 90%;
        margin: 0 auto;
        display: inline-block;
        .el-radio{
          width: 85px;
          height:26px;
          text-align: center;
          background: #f2f5ff;
          color: #5f67ec;
          border: 1px solid #cad7ff;
          margin: 0 20px 5px 0px !important;
          padding: 0;
          line-height: 23px;
        }
        .is-checked{
          background: #545deb;
          border: 1px solid #545deb;
          .el-radio__label{
            color: #fff;
          }
        }
        .el-radio__input{
          display: none;
        }
        .el-radio__label{
          display: inline;
          padding-left: 0px;
        }
      }
      .checkTags{
        display: inline-block;
      }
    }
    .head-row-sub{
      text-align: center;
    }
  }
  .report-date.el-picker-panel{
    left: 215px !important;
    .el-picker-panel__sidebar {
      right: 0;
      width: 180px;
      text-align: center;
      &::before {
        content: "快速选择";
        width: 90%;
        height: 32px;
        margin: 8px 0;
        display: inline-block;
        font-size: 14px;
        line-height: 32px;
        border-radius: 3px;
        color: #fff;
        background: #6689f1;
        text-align: center;
      }
      .el-picker-panel__shortcut {
        text-align: center;
        display: inline-block;
        background: #f3f3f3;
        padding: 0;
        width: 40%;
        margin: 5px;
        &:hover {
          background: #5580ff;
          color: #fff;
        }
      }
    }
    .el-picker-panel__body {
      margin: 0 180px 0 0;
    }
  }
</style>
<script>
  import reportGlobal from "../../global/reportGlobal";

  let moment = require("moment");
  export default {
    props:{},
    data() {
      return {
        pickerOptions: {                //时间日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;   //正常 今天之前
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                const start = moment().format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "昨天",
              onClick(picker) {
                const start = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "前天",
              onClick(picker) {
                const start = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上周同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上月同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本周",
              onClick(picker) {
                const weekOfday = moment().format("E"); //计算今天是这周第几天
                const start = moment()
                .subtract(weekOfday - 1, "days")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一周",
              onClick(picker) {
                const start = moment()
                .week(moment().week() - 1)
                .startOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .week(moment().week() - 1)
                .endOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本月",
              onClick(picker) {
                const start = moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一月",
              onClick(picker) {
                const start = moment()
                .month(moment().month() - 1)
                .startOf("month")
                .format("YYYY-MM-DD");
                const end = moment()
                .month(moment().month() - 1)
                .endOf("month")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本年度",
              onClick(picker) {
                const start = moment()
                .year(moment().year())
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一年",
              onClick(picker) {
                const start = moment()
                .year(moment().year() - 1)
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment()
                .year(moment().year() - 1)
                .endOf("year")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
          ],
        },
        TimeFast:'',          //时间快速选择
        TimeFastList:[         //时间快速选择列表
          { label:'最近30分钟',value:'min30' },
          { label:'最近1小时',value:'hour1' },
          { label:'最近2小时',value:'hour2' },
          { label:'全天',value:'today' },
        ],
        tagsList:[
          // {name:'主要出入口', key:'1'},
          // {name:'店铺', key:'2'},
          // {name:'试衣间', key:'3'},
          // {name:'柜台', key:'4'},
          // {name:'通道', key:'5'},
          // {name:'区域', key:'6'},
          // {name:'展区', key:'7'},
          // {name:'排除通道', key:'-1'},
        ],
        tag:'',
        oldTag:'1',
        companyOptions:[],//企业list
        company_id_arr:[],
        company_id:'',

        caseOptions:[],//案场list
        submitCase:[],//案场选中参数
        allCaseArr:[],//案场全部id
        isAllCase:false,//是否全选案场

        areaOptions:[],//区域list
        submitArea:'',//所属区域
        submitAreaContrast:'',//对比区域

        datetimeval:{
          day:[moment(new Date()).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
          hm:['00:00','23:59']
        },
        KPIList:[],//当前权限的指标list
        KPI:[],//选中的指标
        timeSizeList: [], //时间间隔选择
        timeSizeCkeck:'', //当前选择的时间间隔
        code: this.$route.query.code,        //通过菜单栏点击传过来的code判断使用的公共参数
        global: {},//公共参数
        dataIsChange:true,//判断条件是否已经变化，如果变化了，就显示查询报表按钮
      }
    },
    created(){
      for (let i in reportGlobal.queryList) {
        if (this.code == reportGlobal.queryList[i].code) {
          this.global = reportGlobal.queryList[i]
        }
      }
      this.getCompanyList()
      this.getTimeSize(this.datetimeval);
    },
    watch:{
      tag(val,oldVal){
        this.oldTag = oldVal
      }
    },
    methods:{
      getCompanyList(){
        let url = '/sys/report_assist_new/company_tree'
        this.$api.get(url)
        .then(data=>{
          if(data && data.data){
            //删除最后一个子节点的newTempCompanyVos
            recursion(data.data);
            function recursion(val) {
              if(val.length){
                for(let i in val){
                  if(val[i].children && val[i].children.length){
                    recursion(val[i].children)
                  }else{
                    delete val[i].children
                  }
                }
              }
            }
            this.$nextTick(()=>{
              let arr = [];
              recursionData(Array.of(data.data[0]))
              function recursionData(val) {
                if(val.length){
                  for(let i in val){
                    if(val[i].children){
                      recursionData(val[i].children)
                    }else{
                      arr.push(val[i].node_location.split('-').slice(0,-1))
                      delete val[i].children
                    }
                  }
                }
              }
              this.companyOptions = data.data;
              let company_id_arr = [];//配置当前第一个选中的值
              arr.map(x=>{
                for(let i = 0 ; i < x.length;i++){
                  if(x[i] == data.data[0].id){
                    company_id_arr.push(x.slice(i,x.length))
                  }
                }
              });
              // console.log(company_id_arr,'company_id_arr');
              this.company_id_arr = company_id_arr;
              this.company_id = company_id_arr.join(',');
              this.getTags()
              // this.get
            })
          }else{
            this.$message.warning('无所属企业');
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      //获取案场列表
      getCaseApi(arr){
        let lsarr=[];
        for(let i in arr) {
          lsarr.push(arr[i][arr[i].length-1])
        }
        let url = '/sys/report_assist_new/case_list?tags='+ this.tag
        let params = {
          org_id_list:lsarr,
          org_type:1
        }
        this.defaultCase()
        this.$api.post(url,params)
        .then(data=>{
          if(data && data.data.length){
            this.caseOptions = data.data;
            this.caseOptions.unshift({case_name: '全部', id: 'all'});
            this.submitCase.push('all');
            this.isAllCase = true
            this.allCaseArr = this.caseOptions.map(x=>{
              return x.id
            });
            this.allCaseArr = this.allCaseArr.filter(x=>{
              return x != 'all'
            });
          }else{
            this.getKPIs();
            this.$Bus.$emit('Loading', false);
          }
          this.getArea()
        })
        .catch(err=>{
          this.getArea()
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      },
      //区域列表()
      getArea(){
        this.defaultArea();
        if(this.submitCase==null || this.submitCase.length == 0) {
          this.$Bus.$emit('Loading',false);
          this.getKPIs();
          return ;
        }
        //初始化设置区域多选
        let parmas ={};
        if(this.isAllCase){
          let lsarr=[];
          for(let i in this.company_id_arr) {
            lsarr.push(this.company_id_arr[i][this.company_id_arr[i].length-1])
          }
          parmas={
            org_id_list:lsarr,
            org_type:1
          }
        }else{
          parmas={
            org_id_list:this.submitCase,
            org_type:2
          }
        }
        let url='/sys/report_assist_new/find_area?tags='+ this.tag
        this.$api.post(url,parmas)
        .then(data=>{
          if(data.data){
            // console.log(data.data);
            if(data.data.length){
              this.areaOptions = data.data.map(x=>{
                if(x.tags && x.tags.includes(-1)) {
                  x.area_name = '[排除]'+ x.area_name
                }
                return x
              })
              this.submitArea = this.areaOptions[0] ? this.areaOptions[0].area_id : ''
              this.submitAreaContrast = this.areaOptions[1] ? this.areaOptions[1].area_id : ''
            }
          }
          this.getKPIs();
          this.$Bus.$emit('Loading', false);
        })
        .catch(err=>{
           console.log(err)
          this.defaultArea()
          this.$Bus.$emit('Loading',false);
        })
      },
      //默认案场选择
      defaultCase(){
        this.caseOptions=[];
        this.submitCase=[];
        this.isAllCase = false;
        this.allCaseArr = [];
      },
      //默认区域选择
      defaultArea(){
        this.submitArea = '';
        this.submitAreaContrast = '';
        this.areaOptions = [];
      },
      //企业级联关闭事件
      companyVisibleChange(val){
        if(!val){
          this.companyChange();
        }
      },
      //移除tag时触发
      companyRemoveTag(){
        this.$nextTick(()=>{
          this.companyChange()
        })
      },
      //企业change事件
      companyChange(){
        if(!this.company_id_arr.length) {
          this.$message.warning('请至少选择一个企业');
          this.defaultCase()
          this.defaultArea()
          return
        }
        this.$Bus.$emit('Loading',true);
        this.dataIsChange = true;
        let company_id_arr = this.company_id_arr.map(x => {
          return x.slice(-1)[0]
        });
        this.company_id = company_id_arr.join(',');
        this.getTags()
      },
      //获取当前企业下的tags
      getTags(){
        let lsarr=[];
        for(let i in this.company_id_arr) {
          lsarr.push(this.company_id_arr[i][this.company_id_arr[i].length-1])
        }
        let url = '/sys/report_assist_new/tag_list'
        let params = {
          org_id_list:lsarr,
          org_type: 1
        }
        this.$api.post(url,params)
        .then(data=>{
          if(data && data.data){
            this.tagsList = data.data
            this.tag = data.data[0].id
          }else{
            this.tagsList = [];
            this.tag = '';
          }
          this.getCaseApi(this.company_id_arr);
        })
        .catch(err=>{
           console.log(err);
          this.tagsList = [];
          this.tag = '';
          this.getCaseApi(this.company_id_arr);
        })
      },
      //案场change事件
      CaseChange(val){
        // console.log('CaseChange');
        //已经选择了全部，想要排除掉all这个选项
        if(val[0] == 'all' && val.length != 1){
          this.submitCase = this.submitCase.filter(x=>x != 'all')
          this.isAllCase = false
        }else if(val.includes('all')){//点击了全部，干掉其他选中的部分
          this.submitCase = ['all'];
          this.isAllCase = true;
        }else{
          this.isAllCase = false
        }
        this.dataIsChange = true;
      },
      //案场选择改变
      CaseVisibleChange(val){
        if (!val) {
          if (this.submitCase == []) {
            this.$message.warning('该企业下无案场');
            return
          }
          if(!this.submitCase.length){
            this.$message.warning('请选择至少一个案场');
            this.caseFirstTry()
          }
          this.getArea()
        }
      },
      CaseClick(){
        // console.log('CaseClick');
        if(this.submitCase.length==0) {
          this.$message.warning('请至少选择一个案场');
          this.caseFirstTry()
        }
        this.getArea()
      },
      //案场初始化
      caseFirstTry(notGetKPI = true){
        // console.log('caseFirstTry');
        if(this.caseOptions.length) {
          this.submitCase = ['all']
          this.isAllCase = true;
        }
        if(notGetKPI) this.getKPIs()
      },

      //获取指标，根据案场和企业获取指标数据
      getKPIs(){
        // console.log('getKPIs');
        this.KPI = [];
        let url = '/sys/report_assist_new/get_indicator_list'
        let org_id_list = [];
        let org_type = 0;
        //判断案场选择状态，如果是全选或者是空则进入
        if(this.isAllCase || this.submitCase.length == 0){
          org_type = 1
          for(let i in this.company_id_arr) {
            org_id_list.push(this.company_id_arr[i][this.company_id_arr[i].length-1])
          }
        }else{
          org_id_list = this.submitCase
          org_type = 2
        }
        let params ={
          org_id_list : org_id_list,
          org_type : org_type,
        };
        // console.log(params,'params');
        this.$api.post(url,params)
        .then(data=>{
          // console.log(data);
          if(data){
            this.KPIList = data.data.filter(x => {
              return this.global.indicator_keys.includes(x.key)
            })
            this.KPIList.sort((x, y) => {
              if (x.id < y.id) {
                return -1
              } else {
                return 1
              }
            });
            if(this.KPIList.length)
            {
              this.KPI=this.KPIList[0].key;
            }
          }
          else{
            this.$Bus.$emit('Loading',false);
          }
        })
      },
      //标签选择change事件
      tagChange(val){
        // console.log(val,'val');
        this.$confirm('修改标签将重置案场和区域的选择, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dataIsChange = true;
          this.getCaseApi(this.company_id_arr)
        }).catch(() => {
          this.tag = this.oldTag
        });
      },
      //日期change事件
      dayChange(val){
        this.$Bus.$emit('Loading',true);
        this.$Bus.$emit('Remove');
        this.dataIsChange = true;
        this.getTimeSize(this.datetimeval);
      },
      //时间change事件
      timeChange(val){
        if(val[0] == val[1]){
          this.$message.warning('起始时间不得等于终止时间')
          this.datetimeval.hm = ['00:00','23:59']
        }
        this.TimeFast='';
        this.$Bus.$emit('Loading',true);
        this.$Bus.$emit('Remove');
        this.dataIsChange = true;
        this.getTimeSize(this.datetimeval);
      },
      //快速选择时段
      TimaFastChange(val){
        switch (val) {
          case "min30": {
            let str_hm = moment().subtract(30, 'minutes').format('HH:mm');
            let end_hm = moment().format('HH:mm');
            this.datetimeval.hm = [str_hm, end_hm];
            break;
          }
          case "hour1": {
            let str_hm = moment().subtract(1, 'hours').format('HH:mm');
            let end_hm = moment().format('HH:mm');
            this.datetimeval.hm = [str_hm, end_hm];
            break;
          }
          case "hour2": {
            let str_hm = moment().subtract(2, 'hours').format('HH:mm');
            let end_hm = moment().format('HH:mm');
            this.datetimeval.hm = [str_hm, end_hm];
            break;
          }
          case "today": {
            this.datetimeval.hm = ["00:00", "23:59"];
            break;
          }
        }
        this.$Bus.$emit('Loading',true);
        this.$Bus.$emit('Remove');
        this.dataIsChange = true;
        this.getTimeSize(this.datetimeval);
      },
      //时间粒度是否合法
      getTimeSize(date) {
        let url = '/sys/report_assist_new/get_interval_list?start_day=' + date.day[0] + '&end_day=' + date.day[1] + '&start_hm=' + date.hm[0] +
          '&end_hm=' + date.hm[1];
        this.$api.post(url)
        .then(data => {
          if (data.data) {
            let arr = data.data;
            this.timeSizeList = arr;
            this.timeSizeCkeck = arr[0].tag;
          } else {
            this.timeSizeList = [];
            this.timeSizeCkeck = '';
          }
          this.$nextTick(() => {
            if (this.dycTiemLoad) {
              this.dycTiemLoad = false;
            } else {
              this.$Bus.$emit('Loading', false);
            }
          })
        })
        .catch(err => {
          this.timeSizeList = [];
          this.timeSizeCkeck = '';
          this.$Bus.$emit('Loading', false);
           console.log(err);
        })
      },
      //点击查询报表按钮
      queryData(){
        // console.log(this.$refs.cascaderRef.getCheckedNodes());
        if(!this.company_id_arr.length){
          this.$message.warning('请至少选择一个企业')
          return
        }
        if(!this.tag){
          this.$message.warning('请选择一个标签')
          return
        }
        //判断区域不能相同且不能为空
        if(this.submitArea == '' || this.submitAreaContrast == ''){
          this.$message.warning('区域不能为空')
          return
        }
        if (this.submitArea == this.submitAreaContrast) {
          this.$message.warning('不能选择两个相同的区域进行对比')
          return
        }

        //判断一下选择的时间粒度是否为天以上
        let isDay = this.timeSizeList.filter(x=>{
          return this.timeSizeCkeck == x.tag
        })
        if(isDay[0].type == 'DAY' && (this.datetimeval.hm[0] != '00:00' || this.datetimeval.hm[1] != '23:59')){
          this.$message({
            message:'当选择时间间隔为天以上粒度时，时段选择则选择为全天',
            showClose:true,
            duration:5000
          })
          this.datetimeval.hm = ['00:00','23:59']
          this.TimeFast = 'today'
        }

        let org_id_list = [this.submitArea,this.submitAreaContrast];
        if(this.KPI.length){
          this.dataIsChange = false;//改变按钮状态
          this.$Bus.$emit('KPIAreaData',org_id_list,this.datetimeval,this.KPI,this.tag,isDay[0]);
        }else{
          this.$message.warning('请至少选择一个指标')
        }
      },
      //所属区域改变
      areaChange(val){
        this.dataIsChange = true;
      },
      //对比区域改变
      pkareaChange(val){
        this.dataIsChange = true;
      },
      //时间间隔改变
      timeGapChange(val){
        this.dataIsChange = true;
      },
      //指标选择改变
      kpiChange(val){
        this.dataIsChange = true;
      }
    }
  }
</script>
